<template>
	<view>
		<view class="navbar" :style="{'background':background, 'height':navbarHeight + 'px'}">
			<view :style="{'height':capsuleHeight + 'px', 'top': capsuleTop + 'px' }" class="arrow-content">
				<view class="arrow" v-if="isShowArrow" @click="handleGoToBack"></view>
			</view>
			<view :style="{'width': swidth+'px','margin-bottom': 5 + 'px'}">
				<u-search border-color="#000000" :clearabled="false" :showAction="true" :animation="true"
					:value="keyword" @custom="searchBank" @search="searchBank"></u-search>
			</view>
		</view>
		<view class="record" :style="{'margin-top':capsuleTop+capsuleHeight+5+'px'}">
			<text>历史记录</text>
			<uni-icons type="trash" size="25px" @click="trash"></uni-icons>
		</view>
		<view class="record">
			<u-tag v-for="item,key in history" :key="key" :text="item.name" class="tag2" type="success" plain
				size="large" @click="historytag(item.name)"></u-tag>
		</view>
		<view class="record">
			<text>猜你喜欢</text>
			<uni-icons type="reload" size="25px" @click="Refresh1"></uni-icons>
		</view>
		<view class="record">
			<u-tag v-for="item,key in like" :key="key" :text="item.name" size="large" plain class="tag"
				@click="historytag(item.name)"></u-tag>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			background: {
				type: String,
				default: 'linear-gradient(200deg, #ecf5ff, #fdf6ec);'
			},
			isShowArrow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				capsuleTop: '', //胶囊距离屏幕顶部的距离
				capsuleHeight: '', //胶囊高度
				navbarHeight: '', //导航栏高度
				swidth:'',
				history: [{
						"name": '1'
					},
					{
						"name": '2'
					},
					{
						"name": '3'
					}
				],
				like: [{
						"name": '123'
					},
					{
						"name": '222'
					},
					{
						"name": '333'
					},
				],
				keyword: "",
				close1: true,
				radios: [{
					checked: true
				}],
				checkboxs: [{
					checked: true
				}]
			}
		},
		onLoad() {
			/*#ifdef H5*/
			// 在浏览器端（H5）执行的逻辑
			console.log('Running on H5');
			this.capsuleTop=0,
			this.capsuleHeight=30,
			this.navbarHeight=40,
			this.swidth=uni.getWindowInfo().windowWidth
			/*#endif*/
			
			/*#ifdef MP-WEIXIN*/
			// 微信小程序端执行的逻辑
			const w=uni.getMenuButtonBoundingClientRect().left;
			this.swidth=w-40;
			console.log('Running on WeChat Mini Program');
			const App = getApp();
			this.capsuleTop = App.globalData.capsule.top,
			this.capsuleHeight = App.globalData.capsule.height,
			this.navbarHeight = (App.globalData.capsule.top - App.globalData.system.statusBarHeight) * 2 + App.globalData.capsule.height + App.globalData.system.statusBarHeight
			/*#endif*/
			// 获取应用实例
		},
		methods: {
			handleGoToBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			Refresh1() {
				console.log("后端刷新");
			},
			trash() {
				console.log("清除");
				this.history = null
			},
			historytag(name) {
				uni.redirectTo({
					url: '/pages/ProductListPage/ProductListPage?Product=' + name
				});
			},
			searchBank(keyword) {
				// 回车跳转
				if (keyword != null && keyword != "") {
					uni.redirectTo({
						url: '/pages/ProductListPage/ProductListPage?Product=' + keyword
					});
				}
			}
		},
	}
</script>

<style>
	.searchbox {
		height: 30px;
		border: solid 1px black;
		border-radius: 18px;
		display: flex;
	}

	.record {
		margin: 10px;
		display: flex;
	}

	.tag {
		margin: 0 5px 0 5px;
		width: 12%;
		display: flex;
	}

	.tag2 {
		margin: 0 5px 0 5px;
		width: 12%;
		display: flex;
	}

	.arrow {
		width: 20rpx;
		height: 20rpx;
		border: 5rpx solid black;
		border-right-color: transparent;
		border-bottom-color: transparent;
		transform: rotate(-45deg);
	}

	.navbar {
		display: flex;
		align-items: flex-end;
		width: 100%;
		/* 设置导航栏在顶部 */
		position: fixed;
		top: 0;
		z-index: 99;
	}

	.arrow-content {
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 5px;
		z-index: 999;
		display: flex;
		align-items: center;
	}

	.se {
		width: 50px;
	}
</style>